<template>
  <el-card>
    <el-button type="primary" plain @click="dialogFormVisible = true">添加用户</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="80">
      </el-table-column>
      <el-table-column prop="roleType" label="账号类别" width="80">
      </el-table-column>
      <el-table-column prop="insertTime" label="创建时间" width="150">
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="150">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="delUser(scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="clickToUpdate(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名:" label-width="80px">
          <el-input v-model="form.name" autocomplete="off" class="input"></el-input>
        </el-form-item>
        <el-form-item label="角色类别:" label-width="80px">
          <el-select v-model="form.role" placeholder="请选择角色类型">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码:" label-width="80px">
          <el-input v-model="form.password" autocomplete="off" class="input" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertUser()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改用户" :visible.sync="updateFormVisible">
      <el-form :model="updateForm">
        <el-form-item label="用户名:" label-width="80px">
          <el-input v-model="updateForm.name" autocomplete="off" class="input"></el-input>
        </el-form-item>
        <el-form-item label="角色类别:" label-width="80px">
          <el-select v-model="updateForm.role" placeholder="请选择角色类型">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码:" label-width="80px">
          <el-input v-model="updateForm.password" autocomplete="off" class="input" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser()">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
export default {
  name: 'User',
  mounted () {
    this.getAllUser()
  },
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      updateFormVisible: false,
      form: {name: '', role: '', password: ''},
      updateForm: {id: 1, name: '', password: '', role: ''}
    }
  },
  methods: {
    async getAllUser () {
      const res = await this.$http.get('/CostOfferUser/allUser')
      if (res.data.info) {
        this.tableData = res.data.info.list
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].role === '1') this.tableData[i].roleType = '管理员'
          else this.tableData[i].roleType = '普通用户'
        }
      } else {
        this.$message.error('获取用户列表失败!')
      }
    },
    async insertUser () {
      const res = await this.$http.post('/CostOfferUser/insertCostOfferUser', this.form)
      this.dialogFormVisible = false
      if (res.data.info) {
        this.getAllUser()
        this.$message.success('添加用户成功')
      } else {
        this.$message.error('添加用户失败!')
      }
    },
    async delUser (d) {
      const res = await this.$http.post('/CostOfferUser/delUser', d)
      if (res.data.info) {
        this.$message.success('删除成功!')
        this.getAllUser()
      } else {
        this.$message.error('删除失败!')
      }
    },
    clickToUpdate (d) {
      this.updateForm = d
      this.updateFormVisible = true
    },
    async updateUser () {
      const res = await this.$http.post('/CostOfferUser/updateCostOfferUser', this.updateForm)
      if (res.data.info) {
        this.$message.success('更新成功!')
        this.updateFormVisible = false
        this.getAllUser()
      } else {
        this.$message.error('更新失败!')
      }
    }
  }
}
</script>

<style scoped>
.input{
  width: 50% !important;
}

</style>
